<template>
  <div class="flex">
    <div class="w-[70%] border-r-[1px] min-h-[630px] border-r-[#DCDFE6] dark:border-r-[#3A3E50] pr-[16px]">
      <el-descriptions :column="2" direction="vertical" :span="24">
        <el-descriptions-item width="50%" label="所属项目">
          {{ isNullOrEmpty(showInfo?.projectName) }}
        </el-descriptions-item>
        <el-descriptions-item width="50%" :span="2" label="工单类型">
          {{ isNullOrEmpty(WORKORDER_TYPETEXT[showInfo?.workOrderType]?.label) }}
        </el-descriptions-item>
        <el-descriptions-item width="50%" label="派发方式">
          {{ isNullOrEmpty(WORKORDER_DISPATCH_TYPETEXT[showInfo?.sellMethod]?.label) }}
        </el-descriptions-item>
        <el-descriptions-item width="50%" :span="2" label="工单标题">
          {{ isNullOrEmpty(showInfo?.workOrderTitle) }}
        </el-descriptions-item>
        <el-descriptions-item width="50%" :span="2" label="工单描述">
          {{ isNullOrEmpty(showInfo?.workOrderDesc) }}
        </el-descriptions-item>
        <el-descriptions-item width="50%" :span="1" label="工单照片">
          <ReUpload v-model:files="showInfo.workOrderImg" :isView="true" :limit="6"></ReUpload>
        </el-descriptions-item>
      </el-descriptions>
      <div v-if="showInfo?.workOrderStatus < 4 && ishowwork">
        <el-form ref="ruleFormRefa" :model="formInline" :rules="formRulesa" label-width="auto" label-position="top">
          <el-form-item label="处理结果" prop="dealResult">
            <el-radio-group v-model="formInline.dealResult">
              <el-radio v-for="item in WORKORDER_RESULT" :key="item.value" :value="item.value">
                {{ isNullOrEmpty(item.label) }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="处理意见">
            <el-input v-model="formInline.dealView" :autosize="{ minRows: 4 }" type="textarea" clearable
              placeholder="请输入处理意见" />
          </el-form-item>
        </el-form>
      </div>
      <div class="flex justify-end" v-if="showInfo?.workOrderStatus < 4 && ishowwork">
        <el-button type="primary" plain @click="editwork"
          v-if="showInfo?.createdBy == userid && showInfo?.workOrderStatus == 3">编辑</el-button>
        <el-button type="primary" plain @click="cancelwork"
          v-if="showInfo?.createdBy == userid && showInfo?.workOrderStatus == 3">撤销</el-button>
        <el-button type="primary" @click="handwork">确定</el-button>
      </div>
    </div>
    <div class="w-[30%] flex justify-start pl-[30px] mb-[40px]">
      <el-steps direction="vertical" space="150px" :active="showInfo?.activeNodeIndex">
        <el-step :title="item.stepName" v-for="(item, index) in showInfo?.node">
          <template #description>
            <div class="flex gap-[10px] flex-warp" v-for="(item, index) in item.operateUser" :key="index">
              <div class="mr-[10px] whitespace-nowrap">{{ isNullOrEmpty(item.nickname) }}</div>
            </div>
          </template>
        </el-step>
      </el-steps>
    </div>
  </div>
</template>
<script setup>
import { isNullOrEmpty } from '@/utils/functions'
import {
  WORKORDER_TYPETEXT,
  WORKORDER_RESULT,
  WORKORDER_DISPATCH_TYPETEXT
} from "@/constant/workorder-mangenment";
import { ElMessage, ElMessageBox } from "element-plus";
import ReUpload from "@/components/ReUpload/index.vue";
import { cancelOrder, handleOrder } from "@/api/screen/work-management/index";
import { useDataDashboardThemeStoreHook } from '@/store/modules/data-dashboard-theme'
const useDataDashboardThemeStore = useDataDashboardThemeStoreHook()
const userid = ref(0);
userid.value = JSON.parse(localStorage.getItem("user-info"))?.userInfo?.id;
const props = defineProps({
  showInfo: {
    type: Object,
    default: () => ({})
  },
  closedlog: {
    type: Function,
    required: true
  }
});
const isLoading = ref(true);
const formInline = reactive({
  dealResult: "",
  dealView: "",
  id: props.showInfo.id
});
const formRulesa = reactive({
  dealResult: [{ required: true, message: "请选择处理结果", trigger: "blur" }],
  dealView: [{ required: true, message: "请输入处理意见", trigger: "blur" }]
});
watch(
  () => props.showInfo,
  newVal => {
    formInline.id = newVal.id;
    formInline.dealResult = newVal.dealResult;
    formInline.dealView = newVal.dealView;
    isLoading.value = false;
    if (newVal.node.length > 0) {
      newVal.node[newVal.activeNodeIndex]?.operateUser.forEach(item => {
        if (item.id == userid.value || item.id == -1) {
          ishowwork.value = true;
        }
      });
    }
  },
  {
    deep: true
  }
);
const ishowwork = ref(false);
const ruleFormRefa = ref();
//处理
const handwork = () => {
  ruleFormRefa.value.validate(valid => {
    if (valid) {
      handleOrder(formInline).then(res => {
        if (res.code == 200) {
          ElMessage({
            message: res.msg,
            type: "success"
          });
          useDataDashboardThemeStore.workfresh+= 1;
          props.closedlog(0);
        }
      });
    }
    if (!valid) return;
  });
};
//编辑
const editwork = () => {
  props.closedlog(1);
};
//撤销
const cancelwork = () => {
  ElMessageBox.confirm("是否确定撤销工单?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  })
    .then(() => {
      cancelworkFun();
    })
    .catch(() => { });
};
const cancelworkFun = () => {
  cancelOrder({
    id: props.showInfo.id
  }).then(res => {
    if (res.code == 200) {
      useDataDashboardThemeStore.workfresh+= 1;
      props.closedlog('');
      ElMessage({
        message: res.msg,
        type: "success"
      });
    }
  });
};
</script>
